// 封装获取元素的方法
function getType(selector){
    return selector.substring(0,1)=='.'?document.getElementsByClassName(selector.substring(1)):
                                        document.getElementById(selector.substring(1));
}
//更多瞎边隐藏的内容
var img1 =document.getElementById("img1");
function showMore(){
    getType('.hideMore')[0].style.display="block";
    getType('.hideMore')[0].style.opacity="1";
    getType('.hideMore')[0].style.transition=".5s";
}
function offMore(){
    getType('.hideMore')[0].style.display="none";
    getType('.hideMore')[0].style.opacity="0";
    getType('.hideMore')[0].style.transition="0";
}
// 声明一些变量数组
// var nowLine=0;
// var lyricsMove=false;
// var playState=false;
// var lyrics,lyricsStyle,lyricsFirst,rollT;
var timeArray1=new Array();
var timeArray2=new Array();
// var timeInterval=new Array();
// 1.点击按钮的时候会播放歌曲
var timer;
// var totalTime=0;
var ifPlay = false;
function setPlay(){
    if(ifPlay === false){
        getType('#audio').play();//点击播放
        getType('#toggle').className = 'iconfont icon-zanting';
        timer=setInterval(ProgressTime,1000);
        ifPlay = true;
    }else{
        getType('#toggle').className = 'iconfont icon-kaishi';
        getType('#audio').pause();//点击暂停
        clearInterval(timer)
        ifPlay = false;
    }
}

//2.导入歌词
//初始化页面
//ar表示歌手，ti表示歌名
var divTitle=getType('.div-title')[0];
var lyricContainer=getType('.lyric-container')[0];
function init(){
    let ar =divTitle.getElementsByTagName('span')[0];
    let ti=divTitle.getElementsByTagName('h1')[0];
    let lyricsData, timeString;
    let lyricsArray = new Array();
    // 清除数组，先清除数组可以保证每一次存储的信息无误
    timeArray1.splice(0, timeArray1.length);
    timeArray2.splice(0, timeArray2.length);
    lyricsArray.splice(0, lyricsArray.length);
//     // lyricsData = `
//     //     [ti]最亲的人\n[ar]陆海涛\n[00:01.24]最亲的人-陆海涛\n[00:04.29]词：张维\n[00:06.16]曲：徐一鸣\n[00:07.93]编：于秋实\n[00:10.22]混：付威\n[00:12.46]唱：陆海涛\n[00:15.20]北京娱动力出品\n[00:18.36]\n[00:20.09]翻过了一座山\n[00:23.65]越过了一道弯\n[00:28.02]撩动白云蓝天蓝\n[00:32.04]望眼平川大步迈向前\n[00:36.30]感谢着人间爱\n[00:39.72]传承了千万年\n[00:43.89]亲邻好友笑开颜\n[00:48.25]梦里梦外喜悦春光暖\n[00:52.26]花开山岗那个红艳艳\n[00:56.53]绿水青山不问是何年\n[01:00.64]离家的日子又到冬天 \n[01:04.47]谢谢我最亲（亲爱）的人挂牵\n[01:08.54]门前的小小树已成年\n[01:12.76]阻挡着风雨来得突然\n[01:16.84]家中的爸妈皱纹呈现\n[01:20.76]翻过岁月陪您到永远\n[01:26.50][01:41.08]感谢着人间爱\n[01:45.05]传承了千万年\n[01:49.27]亲邻好友笑开颜\n[01:53.36]梦里梦外喜悦春光暖\n[01:57.49]花开山岗那个红艳艳\n[02:01.63]绿水青山不问是何年\n[02:05.74]离家的日子又到冬天\n[02:09.74]谢谢我最亲（亲爱）的人挂牵\n[02:13.79]门前的小小树已成年\n[02:17.90]阻挡着风雨来得突然 \n[02:21.97]家中的爸妈皱纹呈现\n[02:25.94]翻过岁月陪您到永远\n[02:31.22]\n[02:45.98]花开山岗那个红艳艳\n[02:50.37]绿水青山不问是何年\n[02:54.54]离家的日子又到冬天\n[02:58.47]谢谢我最亲（亲爱）的人挂牵\n[03:02.59]门前的小小树已成年\n[03:06.61]阻挡着风雨来得突然\n[03:10.82]家中的爸妈皱纹呈现\n[03:14.77]翻过岁月陪您到永远\n[03:19.49]翻过岁月陪您到永远\n[03:28.30]
//     //     `
    lyricsData =getType('#lrcStr').innerText;
    console.log(lyricsData)

    lyricsArray = lyricsData.split('[');
    // lyricsData.style.display="block";


//     //添加歌曲信息
//     ti.innerText=lyricsArray[1].split(']')[1];
//     ar.innerText=lyricsArray[2].split(']')[1];

//     //添加歌词
    for(var i=3;i<lyricsArray.length;i++){
      var h=lyricsArray[i].split(']')[0]; //00:15.38
      var q=h.split('.');
      var n=q[0].split(':');
      // var m=n[0].split('[');
      var time=n[0]*60+parseInt(n[1]);
      console.log(time);
    //   console.log(n);
    //这里i==2是第一行歌词，将高度设置为100%;在页面加载完毕之后会出现一个滚动动画
        if(i==3){
            var sss = '<p id="s'+time+'" style="color:#5192fe;">'+lyricsArray[i].split(']')[1]+'</p>';
            lyricContainer.innerHTML += sss;
        }else{
            var ccc ='<p id="s'+time+'">'+lyricsArray[i].split(']')[1]+'</p>';
            lyricContainer.innerHTML += ccc;
        }
        // var sss = '<p id="s'+time+'" style="color:#5192fe;">'+lyricsArray[i].split(']')[1]+'</p>';
    }
}
init();

// 3.歌曲进度条
function ProgressTime(){
    var n=getType('#audio').currentTime/getType('#audio').duration;
    getType('.iconfont icon-yuandian')[0].style.marginLeft=~~(n*getType('.bar')[0].offsetWidth)+'px';
    getType('.barProgress')[0].style.width=n*getType('.bar')[0].offsetWidth+'px';
    // console.log( getType('.barProgress')[0])
    // console.log(getType('.iconfont icon-yuandian')[0].style.marginLeft);//8px 9px  200px
    // console.log(getType('.barProgress')[0].style.width);//8.50872px 9.29095px       200px
    // console.log(~~(n*getType('.bar')[0].offsetWidth)+'px')//8px 9px                 200px
    // console.log(n*getType('.bar')[0].offsetWidth+'px');//8.50871837.. 9.29094954207  200px
    // console.log(n);//0.04254359189873904 0.0464547710353274  1  1
}
ProgressTime();
// 4.拖拽进度条
getType('.icon-yuandian')[0].onmousedown=function(e){//鼠标按下
//    console.log(e);
    document.onmousemove=function(e){//鼠标移动
        //x表示小圆点相对于浏览器窗口左上角为原点定位x距离
        var x=e.clientX;
        // console.log(x);//      427  428
        // a表示进度条的长度
        var a=x-getType('.icon-yuandian')[0].offsetParent.offsetLeft-getType('.icon-yuandian')[0].offsetWidth/2;
        // console.log(getType('.icon-yuandian')[0].offsetParent.offsetLeft);//281    281
        // console.log(getType('.icon-yuandian')[0].offsetWidth/2);//17.5    17.5
        console.log(a);//110.5;(129.5)
        getType('.icon-yuandian')[0].style.marginLeft=a+'px';
        getType('.barProgress')[0].style.width=a+'px';
        var b=parseInt(getComputedStyle(getType('.icon-yuandian')[0]).marginLeft)/getType('.icon-yuandian')[0].offsetWidth;
        console.log(getType('.icon-yuandian')[0].marginLeft);//undefined
        var c=b*getType('#audio').duration;
        getType('#audio').currentTime=c;
        // console.log(c);//948.1642931999999..   948.1642931999999
        ProgressTime();
    }
    // 鼠标移出之后小圆点不再移动
    document.onmouseup=function(){
        this.onmousedown=null;
        this.onmousemove=null;
    }
}
// 找到子元素在父元素中的相对位置
function getElementTop(element){
    var el = (typeof element == "string") ? document.getElementById(element) : element;
    if (el.parentNode === null || el.style.display == 'none') {
        return false;
    }
    return el.offsetTop - el.parentNode.offsetTop;
}

// 5.歌词同步(监听)
var time2;
var index=0;
function addtime(){
    time2=setInterval(function(){
        var temp=now;
        minute=parseInt(temp/60);
        if(now<60){
            getType('.change-time')[0].innerHTML=""+0+":"+now+"";
        }else{
            if(now%60<10){
                getType('.change-time')[0].innerHTML="0"+minute+":0"+now%60+"";
            }else{
                getType('.change-time')[0].innerHTML="0"+minute+":"+now%60+"";
            }
        }

    },1000)
}
getType('#audio').addEventListener('timeupdate',function(){
    console.log(this.currentTime);
    var now=parseInt(this.currentTime);
    if(document.getElementById('s'+now)){
            document.getElementById('s'+now).style.cssText='color:#5192fe;';
            document.getElementById('s'+now).previousSibling.style.cssText='color:#000000;';
            console.log("当前滚动条位置",document.getElementsByClassName('hide-lyric')[0].scrollTop);
            var top = getElementTop(document.getElementById('s'+now))
            document.getElementsByClassName('hide-lyric')[0].scrollTop = top - 130;
        }
    // 7.获取当前播放时间
    // time2=setInterval(function(){
        var temp=now;
        minute=parseInt(temp/60);
        if(now<60){
            getType('.change-time')[0].innerHTML=""+0+0+":"+now+"";
        }else{
            if(now%60<10){
                getType('.change-time')[0].innerHTML="0"+minute+":0"+now%60+"";
            }else{
                getType('.change-time')[0].innerHTML="0"+minute+":"+now%60+"";
            }
        }
        console.log('秒' + temp)
    // }

},false);
// 6.音量大小
var all=getType('.controls-right')[0];
var rate=getType('.planRate')[0];//进度%
var volumeBar=getType('#volume-bar');
var box=getType('#box');
var boxL,newL,moveL,mouseX,left;
// console.log(volumeBar.offsetWidth);//100
// console.log(box.offsetWidth);//10
var cha=volumeBar.offsetWidth-box.offsetWidth;
var indexes=0;
var evt=new Event("change");
console.log(rate);
console.log( Math.ceil(newL/cha));
console.log(cha);
initial();
function initial(){
    box.addEventListener("mousedown",mouseDownclickHandler);
    document.addEventListener("mousemove",mouseMoveclickHandler)
    document.addEventListener("mouseup",mouseUpclickHandler);
    document.addEventListener("change",changeHandler);
    volumeBar.addEventListener("click",clickHandler);
}
function mouseDownclickHandler(e) {
    indexes=1;
    boxL=box.offsetLeft;//56
    mouseX=e.clientX;//鼠标按下拖动的位置
}
function mouseMoveclickHandler(e) {
    if(indexes===1){
        moveL=e.clientX-mouseX;//鼠标移动
        newL=boxL+moveL;//left值
        //判断最小值与最大值
        if(newL<0){
            newL = 0;
        }
        if(newL>=cha){
            newL=cha;
        }
        // 改变left值
        box.style.left = newL + 'px';
        // 计算比例
        var bili = newL / cha * 100;
        rate.textContent = Math.ceil(bili) + '%';
        evt.elem=this;//当前指向 对象
        document.dispatchEvent(evt);//朝谁发送 抛发
        var vol=(newL/cha).toFixed(1);
        console.log(vol);
        getType('#audio').volume=vol;
    }
}
function mouseUpclickHandler(e) {
    indexes=0;
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
}
function clickHandler(e) {
    left = e.clientX-all.offsetLeft-box.offsetWidth/2;
    if(left<0){
        left=0;
    }
    if(left>=cha){
        left=cha;
    }
    box.style.left=left+'px';
    bili=left/cha*100;
    rate.innerHTML=Math.ceil(bili)+'%';
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
    // console.log(bili);
}
function changeHandler(e) {
    console.log(e);
}

// 7.实现音量的声音
// getType('#audio').volume=bili;
// getType('#audio').volume=bili;



// 8.当音频播放完毕之后会出现一个弹窗提醒歌曲播放完毕
function myEndFunction(){
    getType('#toggle').className = 'iconfont icon-kaishi';
    // swal('音频播放已结束');
}

 //9.当点击我喜欢图片的时候心会变成红色(点击按钮的奇偶数)
 // 点击右下角的小心❤，如果没登录，先登录；登录之后再判断
var prefers=getType('.loveCollect')[0];
var values=prefers.getAttribute('value');
console.log(values);
console.log(localStorage.getItem('userHao'));
function clk(){
    // if(localStorage.getItem('userHao')==null||localStorage.getItem('sign')!=1) {
    //     setTimeout(function () {
    //         alert('请先登录');
    //     }, 400)
    // }
    // else{
         $.ajax({
             url:"http://localhost:8080/future/music/addMusictoLovelist",
             method:"post",
             data:{mcName:values},
             success:function(data) {
                 console.log(data);
                 console.log(data.statusCode)
                 console.log(data.info)
                     if(data.statusCode==1){
                         getType('.hideSuccess')[0].style.display='block';
                         getType('.hideSuccessCollect')[0].style.opacity='1';
                         getType('.hideSuccessCollect')[0].style.transform="translate(" + -50 + "%)";
                         setTimeout(function(){
                             getType('.hideSuccess')[0].style.display='none';
                             getType('.hideSuccessCollect')[0].style.opacity='0';
                             getType('.hideSuccessCollect')[0].style.transform="translate(" + -50 + "%)";
                         },1000)
                         // 心变红
                         getType('.icon-xihuan')[0].style.display='none';
                         getType('.loveImg')[0].style.display='block';
                     }else if(data.statusCode==0){
                         getType('.icon-xihuan')[0].style.display='block';
                         getType('.loveImg')[0].style.display='none';
                         // 弹框出现
                         getType('.hideCancel')[0].style.display='block';
                         getType('.hideCancelCollect')[0].style.opacity='1';
                         getType('.hideCancelCollect')[0].style.transform="translate(" + -50 + "%)";
                         setTimeout(function(){
                             getType('.hideCancel')[0].style.display='none';
                             getType('.hideCancelCollect')[0].style.opacity='0';
                             getType('.hideCancelCollect')[0].style.transform="translate(" + -50 + "%)";
                         },1000)
                     }
                },
                 error:function(err){
                     console.log('错误');
                 }

         })
    // }
}
var prefer=getType('.prefer')[0];
var value=prefer.getAttribute('value');
console.log(value);//20
whether();
function whether(){
    if(value==0){
        getType('.icon-xihuan')[0].style.display='block';
        getType('.loveImg')[0].style.display='none';
    }else if(value==1){
        getType('.icon-xihuan')[0].style.display='none';
        getType('.loveImg')[0].style.display='block';
    }
}

// // 进入歌词页面内之后会显示❤的颜色
// whether();
// function whether(){
//     // 判断是否已经收藏
//     $.ajax({
//         url:"http://localhost:8080/future/music/addMusictoLovelist",
//         method:"post",
//         success:function(data){
//             if(data.statusCode==1){
//                 getType('.icon-xihuan')[0].style.display='none';
//                 getType('.loveImg')[0].style.display='block';
//             }else{
//                 getType('.icon-xihuan')[0].style.display='block';
//                 getType('.loveImg')[0].style.display='none';
//             }
//         },
//          error:function(err){
//                  console.log('dat.info');
//           }
//     })
// }

// 10.点击+按钮，会把歌单弄出来，可以添加到我的歌单里面

getType('.add')[0].onclick=function(){
    getType('.addSongs')[0].style.display='block';
}

getType('.cancelList')[0].onclick=function(){
    getType('.addSongs')[0].style.display='none';
}


// var r=0;
//     r++;
//     if(r%2!=0){
//         getType('.icon-xihuan')[0].style.display='none';
//         getType('.loveImg')[0].style.display='block';
//         // 弹框出现
//         getType('.hideSuccess')[0].style.display='block';
//         getType('.hideSuccessCollect')[0].style.opacity='1';
//         getType('.hideSuccessCollect')[0].style.transform="translate(" + -50 + "%)";
//         // 半秒之后弹框消失
//         setTimeout(function(){
//             getType('.hideSuccess')[0].style.display='none';
//             getType('.hideSuccessCollect')[0].style.opacity='0';
//             getType('.hideSuccessCollect')[0].style.transform="translate(" + -50 + "%)";
//         },1000)
//     }else{
//         getType('.icon-xihuan')[0].style.display='block';
//         getType('.loveImg')[0].style.display='none';
//         // 弹框出现
//         getType('.hideCancel')[0].style.display='block';
//         getType('.hideCancelCollect')[0].style.opacity='1';
//         getType('.hideCancelCollect')[0].style.transform="translate(" + -50 + "%)";
//         setTimeout(function(){
//             getType('.hideCancel')[0].style.display='none';
//             getType('.hideCancelCollect')[0].style.opacity='0';
//             getType('.hideCancelCollect')[0].style.transform="translate(" + -50 + "%)";
//         },1000)
//     }
// // 显示播放方式
//     getType('.icon-liebiaoxunhuan')[0].onclick=function(){
//         getType('.mode-panel')[0].style.display='block';
//         getType('.icon-liebiaoxunhuan')[0].onclick=function(){
//             getType('.mode-panel')[0].style.display='none';
//         }
//     }
// 下边音乐播放器的隐藏
//  $('.playControl')[0].onmousemove=function(){
//    $(' playControl-in')[0].style.display='none';
// }
var playControl = document.getElementsByClassName('playControl')[0];
// playControl.onmouseenter = function(){
//     setTimeOut(function(){
//         playControl.style.transform = "translateY(" + 87 + "px)";
//     },2000)
//     console.log('进入')
// }
// playControl.onmouseenter = function(){
//         playControl.style.transform = "translateY(" + 87 + "px)";
//         console.log("进入")
//
// }
// playControl.onmouseleave = function(){
//     playControl.style.transform = "translateY(" + 0 + "px)";
//     console.log('离开')
// }
// playControl.addEventListener('mouseenter',function(){
//     setTimeout(function(){
//         playControl.style.transform = "translateY(" + 87 + "px)";
//     },2000)
// })
// 登录成功以及出现退出登录
var name=getType('.userName')[0];
var login=getType('.login')[0];
var persons=getType('.persons')[0];
var out=getType('.out')[0];
var hideLogOut =getType('.hideLogOut')[0];
var hideLogOutContent = getType('.hideLogOutContent')[0];
var logOutNoBtn=getType('.logOutNoBtn')[0];
var logOutYesBtn=getType('.logOutYesBtn')[0];
if(localStorage.getItem('userHao')!=null || localStorage.getItem("sign")==1){
    login.style.display='none';
    persons.style.display='block';
}
out.onclick=function(){
    setTimeout(function(){
        hideLogOut.style.display = 'block';
        hideLogOutContent.style.opacity = '1';
        hideLogOutContent.style.transform = "translate(" + -50 + "%," + 400 + "px)";
    },1)
    logOutNoBtn.onclick = function(){
        hideLogOutContent.style.opacity = '0';
        hideLogOutContent.style.transform = "translate(" + -50 + "%," + -400 + "px)";
        hideLogOut.style.display = 'none';
    }
//点击确认会退出登录
    logOutYesBtn.onclick = function(){
        hideLogOutContent.style.opacity = '0';
        hideLogOutContent.style.transform = "translate(" + -50 + "%," + -400 + "px)";
        hideLogOut.style.display = 'none';
        persons.style.display='none';
        login.style.display='block';
        localStorage.removeItem('userHao');
        localStorage.removeItem('password');
        localStorage.removeItem('sign');
    }

}
// 判断是否登录
var hideVipLoad=getType('.hideVipLoad')[0];
var hideVipLoadForm=getType('.hideVipLoadForm')[0];
var vipBtn=getType('.vipBtn')[0];
var loadBtn=getType('.loadBtn')[0];
var closeVip=getType('.closeVip')[0];
var myMusic=getType('.myMusic')[0];
// vip的界面
vipBtn.onclick=function(){
    if(localStorage.getItem('userHao')!=null){
        window.location.href='http://localhost:8080/future/toVIPpaper';
    }else{
        hideVipLoad.style.display='block';
        hideVipLoadForm.style.opacity='1';
        closeVip.onclick=function(){
            hideVipLoad.style.display='none';
            hideVipLoadForm.style.opacity='0';
        }
        loadBtn.onclick=function(){
            window.location.href='http://localhost:8080/future/loginpage';
        }
    }

}
// 我的音乐的界面
myMusic.onclick=function(){
    if(localStorage.getItem('userHao')!=null){
        window.location.href='http://localhost:8080/future/toMyMusicpaper';
    }else{
        hideVipLoad.style.display='block';
        hideVipLoadForm.style.opacity='1';
        closeVip.onclick=function(){
            hideVipLoad.style.display='none';
            hideVipLoadForm.style.opacity='0';
        }
        loadBtn.onclick=function(){
            window.location.href='http://localhost:8080/future/loginpage';
        }
    }
}

// // 判断是否登录 end

